<template>
  <BasicModal
    ref="showActionModal"
    :title="`项目类型配置`"
    width="600px"
    @emit-callback-fn="modalCallbackFn"
    :confirmLoading="typeConfigurationLoading"
  >
    <template #content>
      <div class="top-from">
        <a-input v-model:value="nameValue" placeholder="请输入项目类型" @press-enter="addProjectItem" ref="inputRef" />
        <a-button type="primary" @click="addProjectItem">添加</a-button>
      </div>
      <div class="aiInfoConList" v-if="aiInfoConData.length > 0">
        <div class="aiInfoConItem" v-for="(item, index) in aiInfoConData" :key="index">
          <div class="aiInfoConItemTitle">{{ item.name }}</div>
          <div class="aiInfoConItemContent">
            <div :draggable="true" @dragstart="dragstart(item)" @dragenter="dragenter(item)" @dragend="dragend(item)">
              <UnorderedListOutlined class="iconStyle" />
            </div>
            <div>
              <SvgIcon
                class="iconDef"
                :name="'chacha'"
                :color="'#586371'"
                width="20"
                height="20"
                @click="deleteProjectItem(index)"
              />
            </div>
          </div>
        </div>
      </div>
      <BasicEmpty v-else />
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
import { UnorderedListOutlined } from '@ant-design/icons-vue';
import { batchProjectUpdate, getProjectTypeList } from '@/api/projectManagement';
import { message } from 'ant-design-vue';
const showActionModal = ref<any>(null);
const typeConfigurationLoading = ref<boolean>(false);
const emits = defineEmits(['saveData']);
const editTypeModal = async () => {
  await getProjectTypeData();
  nameValue.value = '';
  showActionModal.value.showModal();
  nextTick(() => {
    inputRef.value.focus();
  });
};
const inputRef = ref<any>(null);
const modalCallbackFn = async () => {
  typeConfigurationLoading.value = true;
  aiInfoConData.value.forEach((item: any, index: number) => {
    item.orderNumber = index + 1;
  });
  await batchProjectUpdate(aiInfoConData.value)
    .then(() => {
      message.success('修改成功');
      emits('saveData');
      showActionModal.value.hideModal();
    })
    .finally(() => {
      typeConfigurationLoading.value = false;
    });
};
const aiInfoConData = ref<any>([]);
const nameValue = ref<string>();

const addProjectItem = () => {
  if (!nameValue.value) return message.warning('请输入项目类型');
  aiInfoConData.value.push({
    name: nameValue.value,
    orderNumber: aiInfoConData.value.length + 1,
  });
  nameValue.value = '';
};

const deleteProjectItem = (index: any) => {
  aiInfoConData.value.splice(index, 1);
};

const getProjectTypeData = async () => {
  await getProjectTypeList().then((res) => {
    aiInfoConData.value =
      res?.sort((a: any, b: any) => {
        return (a.orderNumber || Infinity) - (b.orderNumber || Infinity);
      }) || [];
  });
};

const clickVal = ref<string>();
const moveVal = ref<string>();
const endVal = ref<string>();

const dragstart = (val: any) => {
  clickVal.value = val;
};

const dragenter = (val: any) => {
  moveVal.value = val;
};
const dragend = (val: any) => {
  endVal.value = val;
  const index = aiInfoConData.value.indexOf(val);
  const moveObj = moveVal.value ? moveVal.value : '';
  const addIndex = aiInfoConData.value.indexOf(moveObj);
  aiInfoConData.value.splice(index, 1);
  aiInfoConData.value.splice(addIndex, 0, val);
};

defineExpose({
  editTypeModal,
});
</script>

<style lang="less" scoped>
.top-from {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}
.aiInfoConList {
  padding: 0 10px 10px 10px;
  height: 360px;
  overflow-y: auto;
  .aiInfoConItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    .aiInfoConItemTitle {
      font-size: 16px;
      font-weight: 500;
    }
    .aiInfoConItemContent {
      width: 60px;
      display: flex;
      justify-content: space-between;
      .iconDef {
        cursor: pointer;
      }
      .iconStyle {
        color: #666;
        font-size: 20px;
        cursor: grab;
      }
    }
    &:hover {
      background-color: aliceblue;
      border-radius: 6px;
    }
  }
}
</style>
